#live-header {
    $headerHeight: 50px !default;
    height: 96px;
    background-color: $white;
    z-index: 10;
    box-shadow: 0 1px 2px rgba(0,0,0,0.05);
    .navbar {
        background-color: $themeColor;
        color: $white;
        border: none;
        margin-bottom: 0;
    }
    .live-head-tbl{
        display: table;
        height: $headerHeight;
        width: 100%;
        .live-head-cell{
            display: table-cell;
            text-align: center;
            vertical-align: middle;
            &:first-child{
                text-align: left;
            }
            &:last-child{
                text-align: right;
            }
        }
    }
    .live-logo {
        float: left;
        position: relative;
        z-index: 100;
        height: 50px;
        overflow: hidden;
        a {
            width: 36px;
            height: 36px;
            display: block;
            margin: 7px;
            text-decoration: none;
            overflow: hidden;
            height: $headerHeight;
            // width: $headerHeight;
            img {
                max-width: 100%;
                max-height: 100%;
            }
        }
    }
    .live-tit {
        text-align: center;
        font-size: 20px;
        width: 100%;
        position: absolute;
        left: 0;
        line-height: 50px;
        height: 50px;
        background-color: $themeColor;
    }
    .live-menu {
        float: right;
        height: $headerHeight;
        line-height: $headerHeight;
        vertical-align: middle;
        text-align: center;
        position: relative;
        margin-right: 5px;
        button{
            vertical-align: top;
            display: inline-block;
            border: none;
            background-color: transparent;
        }
        .live-icon{
            display: inline-block;
            width: 40px;
            height: 50px;
            text-indent: -999px;
            background: url(../img/live-icons.png) no-repeat 5px center;
            background-size: 70px;
            &.icon-menu{
                background-position: -35px center;
            }
        }
        .live-btn {
            display: inline-block;
            span{
                color: $white;
            }
            &:hover{
                background-color: none;
                box-shadow: none;
            }
        }
        .live-menu-btn {
            background-color: transparent;
            .glyphicon-menu-hamburger{
                font-size: 20px;
            }
        }
        .live-menu-dropdown {
            right: 5px;
            left: auto;
            min-width: 120px;
            a{
                display: block;
                padding: 8px 20px;
                clear: both;
                font-weight: 400;
                line-height: 1.5;
                color: #333;
                white-space: nowrap;
                font-size: 17px;
                text-align: center;
            }
        }
    }
    .live-hgroup {
        height: 30%;
        background-color: $white;
        padding: 0 10px 20px;
        position: relative;
        z-index: 1;
        overflow: hidden;
        h3 {
            font-size: 20px;
            line-height: 1.5;
        }
        small {
            font-size: 14px;
        }
    }
    .nav-area {
        border-bottom: 1px solid $gray;
        border-top: 1px solid $gray;
        background-color: $gray;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
        z-index: 102;
        .live-nav {
            display: table;
            margin: 0;
            &>li {
                display: table-cell;
                color: $default;
                a {
                    color: $default;
                    -webkit-tap-highlight-color: rgba(0,0,0,0);
                    &:active,&:hover,&:visited{
                        background: none;
                    }
                }
                &.active {
                    background-color: $white;
                    color: #ff4800;
                    a {
                        color: $themeColor;
                    }

                }
            }
            .tab-btn{
                small{
                      color: #ff4800;
                }
            }
        }
        #indicator{
            width: 10px;
            height: 2px;
            position: absolute;
            left: 0;
            top: 0;
            span{
                display: inline-block;
                background: red;
                width: 78px;
                width: 2px;
            }
        }
        .live-person-number{
            position: absolute;
            display: inline-block;
            right: 10px;
            bottom: 10px;
            color: $default;
            vertical-align: bottom;
            small{
                display: inline-block;
                height: 18px;
                padding-left: 22px;
                background: url(../img/live-persons.png) no-repeat left center;
                background-size: 18px;
                margin-right: 5px;
                color: $themeColor;
            }
            button{
                border: none;
                background-color: transparent;
                border: 1px solid $themeColor;
                color: $themeColor;
                padding: 2px 5px;
                font-size: 12px;
                padding-left: 18px;
                position: relative;
                i{
                    display: block;
                    background-color: $themeColor;
                    color: $white;
                    left: 1px;
                    top: 1px;
                    padding: 0 2px;
                    height: 18px;
                    line-height: 15px;
                    position: absolute;
                    font-size: 16px;
                    text-decoration: none;
                    font-style: normal;
                }
            }
        }
    }
}
